<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>忘记密码</title>
    <#include "admin/common/header.ftl"/>
<body>
<div class="container-fixed-xs" style="background: url("../static/images/big.jpg") no-repeat;">
    <div style="margin-left: 20px; margin-right: 20px; padding-top: 100px; padding-bottom: 100px;">
        <center><h2>忘记密码</h2></center>
        <form id="forgetForm" method="post" action="/resetPwd">
            <div class="form-group">
                <label for="email" class="required">邮箱</label>
                <input type="text" class="form-control" id="email" name="email" placeholder="请输入注册时候的邮箱">
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-7">
                        <label for="checkCode" class="required">图形验证码</label>
                        <input type="text" class="form-control" id="checkCode" name="checkCode" placeholder="图形验证码" maxLength="4">
                    </div>
                    <div class="col-xs-5">
                        <img src="/captcha/code" id="imgCheckCode" style="margin-top: 25px;" onclick="this.src='/captcha/code?d='+new Date()" >
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-7">
                        <label for="emailCode" class="required">邮箱验证码</label>
                        <input type="text" class="form-control" id="emailCode" name="emailCode" placeholder="邮箱验证码" maxLength="4">
                    </div>
                    <div class="col-xs-5">
                        <button type="button" class="btn" style="margin-top: 25px; width: 148px;" id="getEmailCode">获取验证码</button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-large btn-block btn-primary">找回密码</button>
                <button type="button" class="btn btn-large btn-block btn-primary" id="resetBtn">重置</button>
            </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#forgetForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                email: {
                    message: '邮箱验证失败',
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                },
                checkCode: {
                    message: '图形验证码证失败',
                    validators: {
                        notEmpty: {
                            message: '图形验证码不能为空'
                        }
                    }
                },
                emailCode: {
                    message: '邮箱验证码证失败',
                    validators: {
                        notEmpty: {
                            message: '邮箱验证码不能为空'
                        }
                    }
                }
            }
        }).on('success.form.bv',function (e) {
            // Prevent form submission
           e.preventDefault();

           // Get the form instance
           var $form = $(e.target);

           // Get the BootstrapValidator instance
           var bv = $form.data('bootstrapValidator');

           // Use Ajax to submit form data
           $.post($form.attr('action'), $form.serialize(), function(result) {
                 if (result.errorCode == 'y') {
                    console.log(result.errorText);
                     // js中实现POST跳转页面(带参数)
                     $.StandardPost('/resetPwd.html',{id:result.errorText});
                 } else {
                     new $.zui.Messager('提示消息：' + result.errorText, {
                         icon: 'exclamation-sign',
                         type: 'danger',
                         time: 2000
                     }).show();
                 }
           }, 'json');
        });
        $('#resetBtn').click(function() {
            $('#forgetForm').data('bootstrapValidator').resetForm(true);
        });
    });
    // js用POST方式跳转页面(带参数)
    $.extend({
        StandardPost:function(url,args){
            var form = $("<form method='post'></form>"),input;
            form.attr({"action":url});
            $.each(args,function(key,value){
                input = $("<input type='hidden'>");
                input.attr({"name":key});
                input.val(value);
                form.append(input);
            });
            console.log(args);
            /*form表单一定要加载到页面中，即下面代码中标红的部分，不然参数是无法被传递的（因为这个被坑了）*/
            //jquery方式
            $(document.body).append(form);
            //js原生添加
            //document.body.appendChild(form);
            form.submit();
        }
    });
    // 获取邮箱验证码
    $("#getEmailCode").on("click", function () {
        var email = $("input[name='email']").val();
        var checkCode = $("input[name='checkCode']").val();
        // 验证邮箱是否为空
        if (email == null || email == "") {
            new $.zui.Messager('提示消息：' + "请输入正确的邮箱", {
                icon: 'exclamation-sign',
                type: 'danger',
                time: 2000
            }).show();
            return;
        }
        // 邮箱正则表达式
        var emailReg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if (!emailReg.test(email)) {
            new $.zui.Messager('提示消息：' + "请输入正确的邮箱地址格式", {
                icon: 'exclamation-sign',
                type: 'danger',
                time: 2000
            }).show();
            return;
        }
        // 验证邮箱地址是否存在
        $.ajax({
            type : "GET",
            url : "/email/check",
            contentType: "application/json;charset=utf-8",
            data : {
                email : email
            },
            dataType:"json",
            success : function (result) {
                if (result.errorCode == 'y') {
                    // 验证图形验证码
                    if (checkCode == null || checkCode == "") {
                        new $.zui.Messager('提示消息：' + "请输入图形验证码", {
                            icon: 'exclamation-sign',
                            type: 'danger',
                            time: 2000
                        }).show();
                        return;
                    }
                    // 验证图形验证码是否正确
                    $.ajax({
                        type : "GET",
                        url : "/captcha/check",
                        contentType: "application/json;charset=utf-8",
                        data : {
                            checkCode : checkCode
                        },
                        dataType:"json",
                        success : function (result) {
                            if (result.errorCode == 'y') {
                                // 异步发送邮箱验证码
                                $.ajax({
                                    type : "GET",
                                    url : "/email/code",
                                    contentType: "application/json;charset=utf-8",
                                    data : {
                                        to : email
                                    },
                                    dataType:"json",
                                    success : function (result) {
                                        if (result.errorCode == 'y') {
                                            new $.zui.Messager('提示消息：' + result.errorText, {
                                                icon: 'exclamation-sign',
                                                type: 'success',
                                                time: 2000
                                            }).show();
                                        } else {
                                            new $.zui.Messager('提示消息：' + result.errorText, {
                                                icon: 'exclamation-sign',
                                                type: 'danger',
                                                time: 2000
                                            }).show();
                                        }
                                    },
                                    error : function(result) {
                                        new $.zui.Messager('提示消息：' + result.errorText, {
                                            icon: 'exclamation-sign',
                                            type: 'danger',
                                            time: 2000
                                        }).show();
                                    }
                                });
                            } else {
                                new $.zui.Messager('提示消息：' + result.errorText, {
                                    icon: 'exclamation-sign',
                                    type: 'danger',
                                    time: 2000
                                }).show();
                            }
                        },
                        error : function(result) {
                            new $.zui.Messager('提示消息：' + result.errorText, {
                                icon: 'exclamation-sign',
                                type: 'danger',
                                time: 2000
                            }).show();
                        }
                    });
                } else {
                    new $.zui.Messager('提示消息：' + result.errorText, {
                        icon: 'exclamation-sign',
                        type: 'danger',
                        time: 2000
                    }).show();
                }
            },
            error : function(result) {
                new $.zui.Messager('提示消息：' + result.errorText, {
                    icon: 'exclamation-sign',
                    type: 'danger',
                    time: 2000
                }).show();
            }
        });
    });
</script>
<style>
    body {
        background-color: #F0F0F0;
        background-attachment:fixed;
        background-size:100%;
        height:auto;
    }
</style>
</body>
</html>